<template>
  <base-dialog
    :title="title + '字典项'"
    ref="baseDialog"
    @handleClose="handleClose"
    @handleSubmit="handleSubmit"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="字典编码" prop="dicCode">
        <el-input v-model="form.dicCode" maxlength="20" show-word-limit disabled />
      </el-form-item>

      <el-form-item label="字典标签" prop="dicLabel">
        <el-input v-model="form.dicLabel" maxlength="50" show-word-limit />
      </el-form-item>
      <el-form-item label="字典值" prop="dicValue">
        <el-input v-model="form.dicValue" maxlength="50" show-word-limit />
      </el-form-item>
      <el-form-item label="排序" prop="orderNo">
        <el-input-number
          v-model="form.orderNo"
          class="inputValue"
          controls-position="right"
          :min="0"
          :max="999"
        />
      </el-form-item>

      <el-form-item label="备注">
        <el-input
          v-model="form.remark"
          type="textarea"
          :rows="4"
          placeholder="请输入内容"
          maxlength="200"
          :autosize="{ minRows: 2, maxRows: 12 }"
          show-word-limit
        />
      </el-form-item>
    </el-form>
  </base-dialog>
</template>

<script>
import { addData, editData } from "@/api/system/dic"

export default {
  name: "addDialog",
  data() {
    return {
      title: "",
      form: {
        dicCode: "",
        dicLabel: "",
        dicValue: "",
        orderNo: "",
        remark: ""
      },
      rules: {
        dicCode: [
          { required: true, message: "请输入字典编码", trigger: "blur" },
          { min: 1, max: 50, message: "长度小于20个字符", trigger: "change" }
        ],
        dicLabel: [
          { required: true, message: "请输入字典标签", trigger: "blur" },
          { min: 1, max: 50, message: "长度小于50个字符", trigger: "change" }
        ],
        dicValue: [
          { required: true, message: "值不能为空", trigger: "blur" },
          { min: 1, max: 50, message: "长度小于50个字符", trigger: "change" }
        ],
        orderNo: [{ required: true, message: "排序不能为空", trigger: "blur" }]
      }
    }
  },
  methods: {
    init(dicCode, row) {
      this.$refs.baseDialog.dialogVisible = true
      if (row) {
        this.title = "修改"
        this.form = JSON.parse(JSON.stringify(row))
      } else {
        this.title = "新增"
        this.form.dicCode = dicCode
      }
    },
    handleClose() {
      this.$refs.baseDialog.dialogVisible = false
      this.form = {
        dicCode: "",
        dicValue: "",
        dicLabel: "",
        orderNo: "",
        remark: ""
      }
    },
    // 提交表单
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.id) {
            editData(this.form).then(() => {
              this.$message({
                message: "编辑成功",
                type: "success"
              })
              this.$emit("updatePage")
              this.handleClose()
            })
          } else {
            addData(this.form).then(() => {
              this.$message({
                message: "新增成功",
                type: "success"
              })
              this.$emit("updatePage")
              this.handleClose()
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.inputValue {
  width: 100%;
}

.el-form {
  overflow: hidden;
  margin-bottom: 30px;
}
</style>
